<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在地图上画圈和点</title>
    <!-- 加载百度地图接口 -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GXCSQBVhF8oZlzjfXCmDB5oLrG7ejbYF"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<script>
    // 创建一个map对象，指定div
    var map = new BMap.Map("main");
    // 设置地图当前坐标
    map.centerAndZoom(new BMap.Point(87.60052, 43.81248), 11);
    map.enableScrollWheelZoom(true);

    // 画圆
    var opt ={fillColor:"green", strokeWeight: 1.2 ,fillOpacity: 0.2, strokeOpacity: 0.5};
    var mapCircle = new BMap.Circle(new BMap.Point(87.60052, 43.81248),8000,opt);
    mapCircle.addEventListener("click", function(e){
        alert("圆的点击事件");
    });
    map.addOverlay(mapCircle);


    // 创建图标
    var icon = new BMap.Icon("../../images/point.png", new BMap.Size(6, 6));
    //var size = new BMap.Size(6,6);

    // 地图上添加标记。
    var point = new BMap.Point(87.60052, 43.81248);
    var marker = new BMap.Marker(point);  // 创建标注
    // 修改默认图标
    marker.setIcon(icon);
    // 添加点击事件
    marker.addEventListener("click", function(e){
        alert("点的点击事件");
    });

    map.addOverlay(marker);              // 将标注添加到地图中

</script>

</body>
</html>